import { useEffect, useState } from "react";
import { $ScientificNotation, $eventBus } from "../../../../../../common/utils";
import infoWindowSiteTitleImage from "../../../../../../assets/image/icon_line_details@2x.png"
import lessModule from "./index.module.less"
import { $Http } from "../../../../../../network";
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { use } from "echarts";
// 主页-全景监控页面-地图组件
interface homePagePanoramicMonitoringPageLayerComponentPropsInterface {

}
const HomePage_PanoramicMonitoringPage_MapComponent: React.FC<homePagePanoramicMonitoringPageLayerComponentPropsInterface> = (props) => {

    let map: any
    let [isMapInit, setIsMapInit] = useState<boolean>(false)
    // let isMapInit = false
    const mapInit = () => {
        if (!isMapInit) {
            map = L.map('container').setView([39.9, 111.9], 15);
            L.tileLayer('http://192.168.1.21:12138/index/map/四川省/{z}/{x}/{y}.png', {
                minZoom: 10,
                maxZoom: 15,
            }).addTo(map);
            isMapInit = true
            setIsMapInit(isMapInit)
        }
    }

    const eventBus_on = () => {
        // 地图缩放
        $eventBus.addListener("eventBus_mapZoomAction", (res) => {

            const mapZoom = map.getZoom()

            map.setZoom(res === "enlarge" ? mapZoom + 1 : res === "narrow" ? mapZoom - 1 : 0)
        })

        // 高速名称
        $eventBus.addListener("eventBus_freewayName", (res) => {
            map.eachLayer((layer: any) => {
                if (!layer._url) {
                    map.removeLayer(layer); // 移除非底图图层
                }
            });
            marker_site(res)

            polyline_freeway(res)
        })
    }
    const eventBus_off = () => {
        // 地图缩放
        $eventBus.removeAllListeners("eventBus_mapZoomAction")
        // 高速名称
        $eventBus.removeAllListeners("eventBus_freewayName")
    }

    //站点
    const marker_site = (freewayName: string) => {
        let myInterval: any = null
        JSON.parse(sessionStorage.homePage_freewayList)?.filter((item: object) => item["label"] === freewayName)?.[0]?.["options"].forEach((item: object) => {

            const site = L.marker(item["position"], {
                icon: L.divIcon({
                    html: `<div class="${lessModule["homePagePanoramicMonitoringPageMapComponent-site"]}">
                    <div class="${lessModule["homePagePanoramicMonitoringPageMapComponent-site__inside"]}" style="background-color:${'#FAAD14'}"></div>
                    <span class="${lessModule["homePagePanoramicMonitoringPageMapComponent-site__name"]}" style="left:${- item["label"].length * 6}px">
                    ${item["label"]}
                    </span>
                    </div>`,
                })
            }).addTo(map)

            site.on("mouseover", (e) => {
                const func_execute = () => {
                    $Http("realFigure", { substation_name: item["label"] }).then((res) => {
                        const customPopup = L.popup().setContent(infoWindow_site(item, res));
                        site.bindPopup(customPopup)
                        site.openPopup();

                    })
                }
                func_execute()
                myInterval = setInterval(() => {

                    func_execute()
                }, 30000)
            })

            site.on("mouseout", (e) => {
                clearInterval(myInterval)
                site.closePopup();
            })

        })


    }

    //构建站点信息窗体
    const infoWindow_site = (siteInfo: object, sourceData: object) => {


        return `
            <div class="${lessModule["homePagePanoramicMonitoringPageMapComponent-infoWindowSite"]}">
                <div class="${lessModule["homePagePanoramicMonitoringPageMapComponent-infoWindowSite__top"]}">
                    <div class="${lessModule["infoWindowSite-top__title"]}">
                        <span>${siteInfo["label"]}</span>
                        <img class="${lessModule["top-title__image"]}" src="${infoWindowSiteTitleImage}">    
                    </div>
                    <div class="${lessModule["infoWindowSite-top__content"]}">
                    <div class="${lessModule["top-content__row"]}">
                    <div class="${lessModule["content-row__block"]} ${lessModule["content-row__leftBlock"]}">
                            <span>电压等级：</span>
                            <span>10 kV/0.4 kV</span>
                        </div>
                        <div class="${lessModule["content-row__block"]} ${lessModule["content-row__rightBlock"]}">
                            <span>容量：</span>
                            <span>${$ScientificNotation(sourceData?.["capacity"])} MW</span>
                        </div>
                        
                    </div>
                </div>
                    <div class="${lessModule["infoWindowSite-top__content"]}">
                        <div class="${lessModule["top-content__row"]}">
                            <div class="${lessModule["content-row__block"]} ${lessModule["content-row__leftBlock"]}">
                                <span>进线电压：</span>
                                <span class="${lessModule["row-block__a"]}">${$ScientificNotation(sourceData?.["A_vol_Inline"])}</span>
                                <span class="${lessModule["row-block__b"]}">${$ScientificNotation(sourceData?.["B_vol_Inline"])}</span>
                                <span class="${lessModule["row-block__c"]}">${$ScientificNotation(sourceData?.["C_vol_Inline"])}</span>
                                <span class="${lessModule["row-block__value"]}"> kV</span>
                                
                            </div>
                            <div class="${lessModule["content-row__block"]} ${lessModule["content-row__rightBlock"]}">
                                <span>进线电流：</span>
                                <span class="${lessModule["row-block__a"]}">${$ScientificNotation(sourceData?.["A_cur_Inline"])}</span>
                                <span class="${lessModule["row-block__b"]}">${$ScientificNotation(sourceData?.["B_cur_Inline"])}</span>
                                <span class="${lessModule["row-block__c"]}">${$ScientificNotation(sourceData?.["C_cur_Inline"])}</span>
                                <span class="${lessModule["row-block__value"]}"> A</span>
                            </div>
                        </div>
                    </div>
                   
                </div>
                <div class="${lessModule["homePagePanoramicMonitoringPageMapComponent-infoWindowSite__bottom"]}">
                    <div class="${lessModule["infoWindowSite-bottom__row"]}">
                        <div class="${lessModule["bottom-row__block"]}" style="width:100%">
                            <span>电压偏差：</span>
                                             <span class="${lessModule["row-block__a"]}">${$ScientificNotation(sourceData?.["vol_offset_A"])} %</span>
                                <span class="${lessModule["row-block__b"]}">${$ScientificNotation(sourceData?.["vol_offset_B"])} %</span>
                                <span class="${lessModule["row-block__c"]}">${$ScientificNotation(sourceData?.["vol_offset_C"])} %</span>
                        </div>
                    </div>
                    <div class="${lessModule["infoWindowSite-bottom__row"]}">
                        <div class="${lessModule["bottom-row__block"]}">
                            <span>频率偏差：</span>
                            <span class="${lessModule["row-block__value"]}">${$ScientificNotation(sourceData?.["fre_offset"])} Hz</span>
                        </div>
                        <div class="${lessModule["bottom-row__block"]}">
                            <span>电压暂降：</span>
                            <span class="${lessModule["row-block__value"]}">${$ScientificNotation(sourceData?.["vol_sags"])} %</span>
                        </div>
                    </div>
                    <div class="${lessModule["infoWindowSite-bottom__row"]}">
                        <div class="${lessModule["bottom-row__block"]}">
                            <span>电压波动：</span>
                            <span class="${lessModule["row-block__value"]}">${$ScientificNotation(sourceData?.["vol_fluctuate"])} %</span>
                        </div>
                        <div class="${lessModule["bottom-row__block"]}">
                            <span>不平衡度：</span>
                            <span class="${lessModule["row-block__value"]}">${$ScientificNotation(sourceData?.["vol_unbanlanced"])} %</span>
                        </div>
                    </div>
                    <div class="${lessModule["infoWindowSite-bottom__row"]}">
                        <div class="${lessModule["bottom-row__block"]}">
                            <span>谐波总畸变率：</span>
                            <span class="${lessModule["row-block__value"]}">${$ScientificNotation(sourceData?.["har_vol"])} A</span>
                        </div>
                    </div>
                </div>
            </div>`

    }

    // 高速公路

    const polyline_freeway = (freewayName: string) => {

        var polyline = L.polyline(JSON.parse(sessionStorage.homePage_freewayList)?.filter((item: object) => item["label"] === freewayName)?.[0]?.["positionList"], {
            weight: 5,
            stroke: true,
            color: "rgba(23,161,230,0.4)",

        }).addTo(map);
        map.fitBounds(polyline.getBounds());
    }


    // 初始化
    useEffect(() => {
        mapInit()
        eventBus_on()

        // 销毁
        return () => {
            eventBus_off()
        }
    }, [])


    return (
        <>
            <div className={`${lessModule["homePagePanoramicMonitoringPageMapComponent"]}`} id="container" ></div>
        </>

    )
}
export default HomePage_PanoramicMonitoringPage_MapComponent